<template>
	<view class="">
		<h2>请绑定手机号，以便我们更好的为您提供服务</h2>
		<view class="login-box">
			<u-input placeholder="输入手机号" class="login-btn" type="number" v-model="phone"></u-input>
			<u-input placeholder="手机验证码" class="login-btn" v-model="code">
				<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取哈哈哈"></u-code>
					<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
				</template>
			</u-input>

			<u-button @click="sendForm" type="primary">立即绑定</u-button>


		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				tips: '',
				value: '',
				code: ''
			}
		},
		watch: {
			value(newValue, oldValue) {
				// console.log('v-model', newValue);
			}
		},
		methods: {
			sendForm() {
				const token = uni.getStorageSync('token')
				this.$api.bindPhone({
					mobile: this.phone,
					code: this.code,
					token: token
				}).then(res => {
					uni.$u.toast('绑定成功');
					uni.reLaunch({
						url: '../index/index'
					});
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.phone!=""){
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						this.$api.getCode({
							mobile: this.phone
						}).then(res => {
							uni.hideLoading();
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						})
					
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}else{
					uni.$u.toast('请填写手机号');
				}
				
			},
			change(e) {
				console.log('change', e);
			}
		}
	}
</script>

<style scoped lang="scss">
	h2 {
		font-size: 30rpx;
		color: #333;
		margin: 100rpx 0;
		text-align: center;
		margin-top: 400rpx;
		padding-bottom: 30rpx;
	}

	.login-box {
		margin: 0 30rpx;
		border: 1px solid #eee;
		padding: 20rpx 40rpx;
		padding-bottom: 60rpx;
	}

	.login-btn {
		margin: 40rpx 0;
	}
</style>